<script setup>
import { ref, onMounted, watch } from 'vue'
import { getPropertyListService, searchPropertyService } from '@/apis/list'
import { useRoute } from 'vue-router'
const route = useRoute()

// 存储房源列表信息
const propertyList = ref([])

// 实现分页需要的参数
const pageSize = ref(5)
const page = ref(1)
const total = ref(null)
const type = ref(0)

// 获取房源列表信息需要的参数
const propertyItem = ref({
  type: type.value,
  pageSize: pageSize.value,
  page: page.value
})

// 获取房源列表信息
const getPropertyList = async (type) => {
  propertyItem.value.type = type
  const res = await getPropertyListService(propertyItem.value)
  propertyList.value = res.data.propertyList.rows
  total.value = res.data.propertyList.count
}

// 获取搜索房源的信息
const searchProperty = async () => {
  const res = await searchPropertyService(route.query.key)
  propertyList.value = res.data.data
}

onMounted(() => {
  if (route.query.key) {
    searchProperty()
  } else {
    getPropertyList(0)
  }
})

// 监听搜索关键词的变化，更新页面显示结果
watch(
  () => route.query.key,
  (newkey, oldkey) => {
    if (newkey !== oldkey) {
      searchProperty()
    }
  }
)

// 控制当前所在的导航分类页的序号
const currentIndex = ref(null)

// 切换标签页导航栏筛选房源
const handleClick = (tab) => {
  propertyItem.value.pageSize = 5
  propertyItem.value.page = 1
  pageSize.value = 5
  page.value = 1
  getPropertyList(tab.index)
  currentIndex.value = tab.index
}

// 处理页码变化
const handleCurrentChange = (newPage) => {
  propertyItem.value.page = newPage
  getPropertyList(currentIndex)
}

// 处理页面显示数据条数变化
const handleSizeChange = (newSize) => {
  propertyItem.value.pageSize = newSize
  getPropertyList(currentIndex)
}
</script>

<template>
  <el-tabs
    v-if="propertyList.length"
    type="border-card"
    class="tabs"
    @tab-click="handleClick"
  >
    <el-tab-pane label="全部房源">
      <ul>
        <li
          class="room-item"
          v-for="item in propertyList"
          :key="item.id"
          @click="$router.push(`/detail/${item.id}`)"
        >
          <div class="image">
            <img :src="item.image_url.interior_img[0].url" alt="" />
          </div>

          <ul class="details">
            <li>
              <h2>{{ item.title }}</h2>
            </li>
            <li>
              <h3>
                {{ item.rent_type }}<i class="iconfont icon-tubiaozhizuo-"></i
                >{{ item.room_count }}室{{ item.livingroom_count }}厅<i
                  class="iconfont icon-tubiaozhizuo-"
                ></i
                >{{ Math.floor(item.room_area) }}平方米<i
                  class="iconfont icon-tubiaozhizuo-"
                ></i
                >朝{{ item.room_direction }}
              </h3>
            </li>
            <li>{{ item.county }}-{{ item.resident }}-{{ item.address }}</li>
          </ul>

          <div class="price">
            <h1>{{ Math.floor(item.price) }}</h1>
            元/月
          </div>
        </li>
      </ul>
    </el-tab-pane>

    <el-tab-pane label="整租">
      <ul>
        <li
          class="room-item"
          v-for="item in propertyList"
          :key="item.id"
          @click="$router.push(`/detail/${item.id}`)"
        >
          <div class="image">
            <img :src="item.image_url.interior_img[0].url" alt="" />
          </div>

          <ul class="details">
            <li>
              <h2>{{ item.title }}</h2>
            </li>
            <li>
              <h3>
                {{ item.rent_type }}<i class="iconfont icon-tubiaozhizuo-"></i
                >{{ item.room_count }}室{{ item.livingroom_count }}厅<i
                  class="iconfont icon-tubiaozhizuo-"
                ></i
                >{{ Math.floor(item.room_area) }}平方米<i
                  class="iconfont icon-tubiaozhizuo-"
                ></i
                >朝{{ item.room_direction }}
              </h3>
            </li>
            <li>{{ item.county }}-{{ item.resident }}-{{ item.address }}</li>
          </ul>

          <div class="price">
            <h1>{{ Math.floor(item.price) }}</h1>
            元/月
          </div>
        </li>
      </ul>
    </el-tab-pane>

    <el-tab-pane label="合租">
      <ul>
        <li
          class="room-item"
          v-for="item in propertyList"
          :key="item.id"
          @click="$router.push(`/detail/${item.id}`)"
        >
          <div class="image">
            <img :src="item.image_url.interior_img[0].url" alt="" />
          </div>

          <ul class="details">
            <li>
              <h2>{{ item.title }}</h2>
            </li>
            <li>
              <h3>
                {{ item.rent_type }}<i class="iconfont icon-tubiaozhizuo-"></i
                >{{ item.room_count }}室{{ item.livingroom_count }}厅<i
                  class="iconfont icon-tubiaozhizuo-"
                ></i
                >{{ Math.floor(item.room_area) }}平方米<i
                  class="iconfont icon-tubiaozhizuo-"
                ></i
                >朝{{ item.room_direction }}
              </h3>
            </li>
            <li>{{ item.county }}-{{ item.resident }}-{{ item.address }}</li>
          </ul>

          <div class="price">
            <h1>{{ Math.floor(item.price) }}</h1>
            元/月
          </div>
        </li>
      </ul>
    </el-tab-pane>

    <el-tab-pane label="短租">
      <ul>
        <li
          class="room-item"
          v-for="item in propertyList"
          :key="item.id"
          @click="$router.push(`/detail/${item.id}`)"
        >
          <div class="image">
            <img :src="item.image_url.interior_img[0].url" alt="" />
          </div>

          <ul class="details">
            <li>
              <h2>{{ item.title }}</h2>
            </li>
            <li>
              <h3>
                {{ item.rent_type }}<i class="iconfont icon-tubiaozhizuo-"></i
                >{{ item.room_count }}室{{ item.livingroom_count }}厅<i
                  class="iconfont icon-tubiaozhizuo-"
                ></i
                >{{ Math.floor(item.room_area) }}平方米<i
                  class="iconfont icon-tubiaozhizuo-"
                ></i
                >朝{{ item.room_direction }}
              </h3>
            </li>
            <li>{{ item.county }}-{{ item.resident }}-{{ item.address }}</li>
          </ul>

          <div class="price">
            <h1>{{ Math.floor(item.price) }}</h1>
            元/月
          </div>
        </li>
      </ul>
    </el-tab-pane>

    <el-tab-pane label="长租">
      <ul>
        <li
          class="room-item"
          v-for="item in propertyList"
          :key="item.id"
          @click="$router.push(`/detail/${item.id}`)"
        >
          <div class="image">
            <img :src="item.image_url.interior_img[0].url" alt="" />
          </div>

          <ul class="details">
            <li>
              <h2>{{ item.title }}</h2>
            </li>
            <li>
              <h3>
                {{ item.rent_type }}<i class="iconfont icon-tubiaozhizuo-"></i
                >{{ item.room_count }}室{{ item.livingroom_count }}厅<i
                  class="iconfont icon-tubiaozhizuo-"
                ></i
                >{{ Math.floor(item.room_area) }}平方米<i
                  class="iconfont icon-tubiaozhizuo-"
                ></i
                >朝{{ item.room_direction }}
              </h3>
            </li>
            <li>{{ item.county }}-{{ item.resident }}-{{ item.address }}</li>
          </ul>

          <div class="price">
            <h1>{{ Math.floor(item.price) }}</h1>
            元/月
          </div>
        </li>
      </ul>
    </el-tab-pane>

    <el-row>
      <el-col :offset="8">
        <!-- 分页区域 -->
        <div class="pagination">
          <el-pagination
            background
            layout="jumper,total,sizes,prev,pager,next"
            :page-sizes="[2, 3, 5, 10]"
            v-model:current-page="page"
            v-model:page-size="pageSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="total"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>
  </el-tabs>

  <el-empty v-else :image-size="200" />
</template>

<style lang="scss" scoped>
.tabs {
  ul {
    margin: 20px;

    .room-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 2px solid #f5f5f5;
      padding: 20px;

      .image {
        width: 300px;
        height: 200px;
        margin: 10px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .details {
        width: 450px;
        font-size: 16px;

        li {
          margin: 15px 0;

          h2 {
            width: 100%;
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

            &:hover {
              color: $ljhColor;
              border-bottom: 2px solid $ljhColor;
            }
          }

          .iconfont {
            font-size: 20px;
            font-weight: bold;
            margin: 0 20px;
            color: #d7d7df;
          }
        }
      }

      .price {
        width: 300px;
        color: red;
        font-size: 20px;

        h1 {
          display: inline-block;
        }
      }

      &:hover {
        background-color: #f9f9f9;
      }
    }
  }

  .pagination {
    margin: 40px;
  }
}
</style>
